<template>
    <el-form
        :model="data"
        :inline="true"
        label-position="right"
        label-width="100px"
        style="margin-top: 20px"
    >
      <el-form-item label="选择房间">
        <el-select
            v-model="data.roomId"
            multiple
            filterable
            collapse-tags
            placeholder="直播间"
            :loading="data.RoomIdListLoading"
        >
          <el-option
              v-for="item in data.RoomIdList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择日期">
        <el-date-picker
            v-model="data.date"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="关键字个数">
        <el-input-number
            v-model="data.top"
            :min="1"
            :max="300"
            :step="10"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>

    </el-form>
    <div
        v-loading="data.barrageWordCloudLoading"
        ref="barrage_word_cloud"
        id="barrage_word_cloud"
        element-loading-background="rgba(255, 255, 255, 0.3)"
    >
    </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
export default {
  name: "BarrageWordCloud",
  setup(){
    const { proxy } = getCurrentInstance();
    const maskImageBase64 = '';
    const maskImage = new Image();
    maskImage.src = maskImageBase64;
    let myChart
    let option = {
      series: [{
        type: 'wordCloud',
        maskImage:maskImage,
        keepAspect: false,
        left: 'center',
        top: 'center',
        width: '884px',
        height: '100%',
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        layoutAnimation: true,
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          color: function () {
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')';
          }
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textShadowBlur: 10,
            textShadowColor: '#333'
          }
        },
        data: [{
          name:"请选择条件",
          value:1
        }]
      }]
    };
    const data = reactive({
      date:[],
      roomId:[],
      RoomIdList:[],
      top:150,
      RoomIdListLoading:true,
      barrageList:[],
      barrageWordCloudLoading:false
    })
    let barrage_word_cloud = ref()
    function submit() {
      if(0 === data.roomId.length) {
        ElMessage.error("请选择房间")
        return false
      }
      if(2 > data.date.length) {
        ElMessage.error("请选择开始与结束日期")
        return false
      }
      data.barrageWordCloudLoading = true;
      proxy.$axios.post("/getBarrageList", {
        startDate:data.date[0],
        endDate:data.date[1],
        roomId:data.roomId,
        top:data.top
      }).then((response) => {
        data.barrageList = response.data
        buildBarrageWordCloud(data.barrageList,maskImageBase64)
        data.barrageWordCloudLoading = false;
      });
    }
    function buildBarrageWordCloud(barrageList) {
      let option = {
        series: [{
          maskImage:maskImage,
          width: '480px',
          height: '449px',
          data: barrageList
        }]
      };
      option && myChart.setOption(option)
    }
    onMounted(() => {
      data.barrageWordCloudLoading = true;
      proxy.$axios.post("/getRoomIdList",[])
          .then((response) => {
            data.RoomIdList = response.data
            data.RoomIdListLoading = false
            myChart = echarts.init(barrage_word_cloud.value);
            myChart.setOption(option,true);
            data.barrageWordCloudLoading = false;
          });
    })
    window.onresize = function() {
      myChart.resize();
    };
    return {
      submit,
      barrage_word_cloud,
      data
    }
  },
  components: [],
}
</script>

<style scoped>
#barrage_word_cloud {
  width:100%;
  height:100%;
}
</style>